<template>

  <div class="common-layout">
    <el-container>
      <el-header style="height: 60px;background: #58a3f5">
        <span style="color:white;font-size: 20px;margin: 5px;width: 100px;height: 60px;text-align: center">后台系统管理</span>
      </el-header>
      <div style="display: flex">
        <el-aside style="width:200px; border-right:1px solid #ddd; min-height: calc(100vh - 60px)">
          <el-menu style="border:0" router :default-active="router.currentRoute.value.path">
            <el-menu-item style="text-align:center" index="/manager/home"><el-icon><House /></el-icon>系统首页</el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="1-1">管理员信息</el-menu-item>
              <el-menu-item index="1-2">用户信息</el-menu-item>
            </el-sub-menu>

            <el-menu-item index="/manager/data">
              <el-icon><PieChart /></el-icon>
              <span>数据统计</span>
            </el-menu-item>
          </el-menu>

        </el-aside>


        <div style="flex:1;background: #ddd;padding: 10px">
          <RouterView/>
        </div>



      </div>

    </el-container>
  </div>

</template>
<script setup>

import { RouterView } from 'vue-router'

import { House, PieChart, User } from '@element-plus/icons-vue'
import router from '@/router/index.js'
</script>